Day17打造一個糖尿病自我監測小工具：從0開始學前端

2025 iThome 鐵人賽

DAY 17

自我挑戰組

打造一個糖尿病自我監測小工具：從0開始學前端系列第 17 篇

17th鐵人賽

1155

2025-09-17 16:17:18

27 瀏覽

分享至

今天來挑戰使用者「帳密」的功能，因為這個是患者或家屬為個人的病情做紀錄，所以我認為應該要有帳密的功能。

想法

創建 signup.html 作為註冊頁面：輸入帳號 + 密碼 → 存進 localStorage
創建 login.html 作為登入頁面：輸入帳號 + 密碼 → 到 localStorage 檢查 → 正確才轉跳頁面
加入登入、註冊的邏輯：加在 script.js

signup.html

也是利用表單的方式，讓使用者填寫其帳密，現做一版超簡單的，之後再看看要不要連結電話號碼或電子郵件。

<head>
  <link rel="stylesheet" href="style.css" />
  <title>註冊</title>
</head>

<body>
    <nav>
        <a href="index.html">首頁</a>
        <a href="report.html">紀錄</a>
        <a href="record.html">填寫</a>
        <a href="signup.html">註冊</a>
        <a href="login.html">登入</a>
    </nav>

    <h1>註冊</h1>

    <form>
        <label for="username">帳號名：</label>
        <input type="text" id="username" required><br><br>

        <label for="password">密碼：</label>
        <input type="number" id="password" required><br><br>

        <button type="submit">註冊</button>
    </form>

    <p id="message"></p>    <!--JS 判斷是否有重複帳號，回傳相對應訊息-->

</body>

JS 邏輯

  // ===== 註冊邏輯 =====
  document.addEventListener("DOMContentLoaded", () => {
    const signupForm = document.getElementById("signupForm");
    if (signupForm) {
        signupForm.addEventListener("submit", (e) => {
        e.preventDefault();

        const username = document.getElementById("username").value.trim();
        const password = document.getElementById("password").value.trim();
        const message = document.getElementById("message");

        let users = JSON.parse(localStorage.getItem("users")) || {};

        // 檢查輸入是否完整
        if (!username || !password) {
            message.textContent = "請輸入帳號與密碼！";
            message.style.color = "red";
            return;
        }

        // 檢查帳號是否已存在
        if (users[username]) {
            message.textContent = "此帳號已被註冊，請換一個！";
            message.style.color = "red";
        } else {
            users[username] = password;
            localStorage.setItem("users", JSON.stringify(users));
            message.textContent = "註冊成功！現在可以去登入了。";
            message.style.color = "green";

            // 1 秒後跳轉
            setTimeout(() => {
            window.location.href = "login.html";
            }, 1000);
            }
        });
    }
    });

login.hmtl

跟 sighup.html 想法差不多，也是用表單去接收使用者輸入的資料，再去 localStorage 找有沒有相應的資料，有的話就登入成功。

但思考了一下，我希望設計成，成功註冊、登入後，才可以填寫及追蹤身體狀況，所以設想是按下登入會轉跳至主頁，標題欄會從三個按鈕 → 五個按鈕 (多了：填寫、追蹤)。

註冊：把帳密存進 localStorage。
登入：驗證帳密正確 → 在 localStorage 裡加一個 loggedInUser（記錄目前登入的是誰）。
主頁 (index.html)：
- 預設只顯示「首頁」「註冊」「登入」按鈕。
- 如果偵測到 loggedInUser 存在 → 顯示「填寫」「紀錄報告」的選項。
登出：清掉 loggedInUser，再回到只有基本選單。

<head>
  <link rel="stylesheet" href="style.css" />
  <title>登入</title>
  <script src="script.js"defer></script>
</head>

<body>
    <nav>
        <a href="index.html">首頁</a>
        <a href="report.html">紀錄</a>
        <a href="record.html">填寫</a>
        <a href="signup.html">註冊</a>
        <a href="login.html">登入</a>
    </nav>

    <h1>登入</h1>

    <form id="loginForm">
        <label for="username">帳號名：</label>
        <input type="text" id="username" required><br><br>

        <label for="password">密碼</label>
        <input type="password" id="password" required><br><br>

        <button type="submit">登入</button>
    </form>

    <p id="message"></p>

</body>

JS 邏輯

const loginForm = document.getElementById("loginForm");
    if (loginForm) {
    loginForm.addEventListener("submit", (e) => {
        e.preventDefault();

        const username = document.getElementById("username").value.trim();
        const password = document.getElementById("password").value.trim();
        const message = document.getElementById("loginMessage");

        let users = JSON.parse(localStorage.getItem("users")) || {};

        if (users[username] && users[username] === password) {
        // 登入成功，記錄目前使用者
        localStorage.setItem("loggedInUser", username);
        message.textContent = "登入成功！即將前往首頁...";
        message.style.color = "green";

        setTimeout(() => {
            window.location.href = "index.html";
        }, 1000);
        } else {
        message.textContent = "帳號或密碼錯誤！";
        message.style.color = "red";
        }
    });
    }

index.html 修改部分

原本是五個按鈕，改成還沒登入前只有三個，帶入 JS 邏輯，得以在登入後恢復五個按鈕。

    <header>
        <nav id="navbar">
        <a href="index.html">首頁</a>
        <a href="signup.html">註冊</a>
        <a href="login.html">登入</a>
        <!-- 「填寫」「紀錄」要登入後才會加進來 -->
        </nav>

        <script src="script.js" defer></script>

        <h1>糖尿病小護士</h1>
    </header>

目前為止註冊、登入功能差不多完成了，但我想加個問候語，登入後會在標題欄右上角說：「歡迎回來~ (使用者帳戶名)」。

概念

在 script.js 加上：( index.html 已引入)

找到目前使用者

const loggedInUser = localStorage.getItem("loggedInUser");

如果是有登入的，就在標題欄加上文字

if (loggedInUser) {
  const header = document.querySelector("header");
  const welcome = document.createElement("div");
  welcome.textContent = `歡迎回來～ ${loggedInUser}`;
  welcome.style.cssText = `
    position: absolute; top: 10px; right: 10px;
    font-weight: bold; color: #333;
  `;
  header.appendChild(welcome);
}